<link href='/css/giiwa.css' rel='stylesheet' />
<link href='/css/chart.css' rel='stylesheet' />
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/hc/highcharts.js"></script>
<script type="text/javascript" src="/hc/highcharts-more.js"></script>

<div id='gauge'>
</div>

<script>
$(function () {
    $('#gauge').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: "$lang.get('gauge.disk.title')"
        },
        xAxis: {
        	categories: [#foreach($d in $list) "$d.name" , #end]
        },
        credits:{
        	enabled: false
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br>'+
                    this.series.name +': '+ this.y +'<br>'+
                    "$lang.get('gauge.disk.total'): "+ this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                }
            }
        },
        series: [{
            name: "$lang.get('gauge.disk.free')",
            data: [#foreach($d in $list) $d.free, #end],
            color: '#009df5'
        }, {
            name: "$lang.get('gauge.disk.used')",
            data: [#foreach($d in $list) $d.used, #end],
            color: '#961616'
        }]
    });
});				
</script>
